<template>
	<sysJk :label="'2.现场消防设备工作状态判断'" showBack :withoutTop="true" :leftTime="300">
		<template v-slot:content>
			<view class="warp" id="warp"  @touchmove.stop="()=>{}">
				<view class="taskTit" style="text-align: left;width:100%;font-size: 2.5vh;">
					{{questionList[showQuestion-1]}}
				</view>
				<view class="innerContent" style="position:relative;width:100%;height:100%">
					<image :src="bUrl"  style="width:100%;height:100%;display: block;">
					</image>
					<view class="myCard" id="myCard">
						<view class="cardContent">
							<image v-if="picIndex==2" class="maskLight" style="position: absolute;" :src="requestUrl+'/static/image/green.png'" :style="{left:425*widthBl+'px',top:355*heightBl+'px',width:30*widthBl+'px',height:30*heightBl+'px'}"></image>
							<!-- <image v-if="picIndex==2&&!handleByAutoFlag" class="maskLight" style="position: absolute;" :src="requestUrl+'/static/image/back.png'" :style="{left:425*widthBl+'px',top:355*heightBl+'px',width:30*widthBl+'px',height:30*heightBl+'px'}"></image> -->
							<image v-if="picIndex==2" class="maskLight" style="position: absolute;" :src="requestUrl+'/static/image/green.png'" :style="{left:425*widthBl+'px',top:390*heightBl+'px',width:30*widthBl+'px',height:30*heightBl+'px'}"></image>
							<!-- <image v-if="picIndex==2&&!handleBySelfFlag" class="maskLight" style="position: absolute;" :src="requestUrl+'/static/image/back.png'" :style="{left:425*widthBl+'px',top:390*heightBl+'px',width:30*widthBl+'px',height:30*heightBl+'px'}"></image> -->
								<view class="handleBtn" >
									<!-- <u-button color="#1E90FF	" custom-style="width:100rpx;height:30rpx;border-radius:10rpx;margin-right:10px" @tap="lastTask">上一题</u-button> -->
									<u-button :custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'green',color:'#fff',fontSize:'3vh'}" v-if="examType==1" @click="showFlag=true">查看解析</u-button>
									<!-- <u-button color="#1E90FF	" custom-style="width:100rpx;height:30rpx;border-radius:10rpx;margin-right:10px" @tap="nextTask">下一题</u-button> -->
								</view>
								<view class="btnArea">
									<u-button
										:custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'#1E90FF',color:'#fff',fontSize:'3vh'}"
										@click="handle">提交</u-button>
									<u-button :custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'#1E90FF',color:'#fff',fontSize:'3vh'}"
										@click="redo">重做</u-button>
									<u-button :custom-style="{width:'100rpx',height:'30rpx',borderRadius:'10rpx',marginRight:'10px',background:'#1E90FF',color:'#fff',fontSize:'3vh'}"
										@click="goBack">返回</u-button>
								</view>
							<view class="writeBox" id="writeBox" :style="{left:writeBoxLeft,top:writeBoxTop}"
								@tap="showDialog" v-if="picIndex==1">
								<image src="https://www.xfzsb.com/static/image/open.png" mode="widthFix"
									style="width:20px"></image>
							</view>
							<view class="writeBox" id="closeBox" :style="{right:30*widthBl+'px',top:30*heightBl+'px'}" @tap="closeDialog"
								v-if="picIndex==2">
								<image src="https://www.xfzsb.com/static/image/close.png" mode="widthFix"
									style="width:20px"></image>
							</view>
							<template v-if="showQuestion==1">
					
								<view class="writeBox" id="funBtn"
									:style="{left:1325*widthBl+'px',top:540*heightBl+'px',width:80*widthBl+'px',height:45*heightBl+'px'}"
									@tap="toStep(2)" v-if="picIndex==2&&funStep==1">
					
								</view>
								<view class="writeBox" id="funBtn2"
									:style="{left:1035*widthBl+'px',top:540*heightBl+'px',width:80*widthBl+'px',height:45*heightBl+'px'}"
									@tap="toStep(3)" v-if="picIndex==2&&funStep==2">
					
								</view>
								<view class="answerBox" v-if="showQuestion==1"  :style="{width:345*widthBl-35+'px'}">
									<view class="answerTit">
										请查看001回路01机配置的设备总数
									</view>
									<view class="answerSelect">
										
										<radio-group @change="onChange" >
														<label class="uni-list-cell uni-list-cell-pd" v-for="(item,idx) in items" :key="idx" style="display: flex;margin-bottom: 5px;align-items: center;">
															<view>
																<radio :value="item" :checked="result==item" :style="{transform:'scale('+widthBl+')'}"/>
															</view>
															<view>设备总数：{{item}}</view>
														</label>
										</radio-group>
									</view>
								</view>
								
							</template>
							<template v-if="showQuestion==2">
							
								<view class="writeBox" id="funBtn"
									:style="{left:1325*widthBl+'px',top:540*heightBl+'px',width:80*widthBl+'px',height:45*heightBl+'px'}"
									@tap="toStep(2)" v-if="picIndex==2&&funStep==1">
							
								</view>
								<view class="writeBox" id="funBtn2"
									:style="{left:1130*widthBl+'px',top:540*heightBl+'px',width:80*widthBl+'px',height:45*heightBl+'px'}"
									@tap="toStep(3)" v-if="picIndex==2&&funStep==2">
							
								</view>
								<view class="answerBox" v-if="showQuestion==2"  :style="{width:345*widthBl-35+'px'}">
									<view class="answerTit">
										请查看01回路001地址01机的工作状态
									</view>
									<view class="answerSelect">
										
										<radio-group @change="onChange" >
														<label class="uni-list-cell uni-list-cell-pd" v-for="(item,idx) in items2" :key="idx" style="display: flex;margin-bottom: 5px;align-items: center;">
															<view>
																<radio :value="item" :checked="result==item" :style="{transform:'scale('+widthBl+')'}"/>
															</view>
															<view>{{item}}</view>
														</label>
										</radio-group>
									</view>
								</view>
								
							</template>
							
							<view class="writeBox" v-if="picIndex==2" id="timeBox" :style="{left:380*widthBl+'px',top:90*heightBl+'px',width:215*widthBl+'px',height:75*heightBl+'px'}" @tap="showDialog" style="text-align: center;">
								<text style="color:red">{{showTime}}</text> 
							</view>
							
							<!-- <view class="numberBox"> -->
							<view class="writeBox numberBtn"
								:style="{left:1032*widthBl+'px',top:542*heightBl+'px',width:82*widthBl+'px',height:40*heightBl+'px'}"
								@tap="clickNum(1)" v-if="picIndex==2&&funStep==3">
					
							</view>
							<view class="writeBox numberBtn"
								:style="{left:1132*widthBl+'px',top:542*heightBl+'px',width:82*widthBl+'px',height:40*heightBl+'px'}"
								@tap="clickNum(2)" v-if="picIndex==2&&funStep==3">
					
							</view>
							<view class="writeBox numberBtn"
								:style="{left:1232*widthBl+'px',top:542*heightBl+'px',width:82*widthBl+'px',height:40*heightBl+'px'}"
								@tap="clickNum(3)" v-if="picIndex==2&&funStep==3">
					
							</view>
							<view class="writeBox numberBtn"
								:style="{left:1032*widthBl+'px',top:612*heightBl+'px',width:82*widthBl+'px',height:40*heightBl+'px'}"
								@tap="clickNum(4)" v-if="picIndex==2&&funStep==3">
					
							</view>
							<view class="writeBox numberBtn"
								:style="{left:1132*widthBl+'px',top:612*heightBl+'px',width:82*widthBl+'px',height:40*widthBl+'px'}"
								@tap="clickNum(5)" v-if="picIndex==2&&funStep==3">
					
							</view>
							<view class="writeBox numberBtn"
								:style="{left:1232*widthBl+'px',top:612*heightBl+'px',width:82*widthBl+'px',height:40*heightBl+'px'}"
								@tap="clickNum(6)" v-if="picIndex==2&&funStep==3">
					
							</view>
							<view class="writeBox numberBtn"
								:style="{left:1032*widthBl+'px',top:682*heightBl+'px',width:82*widthBl+'px',height:40*heightBl+'px'}"
								@tap="clickNum(7)" v-if="picIndex==2&&funStep==3">
					
							</view>
							<view class="writeBox numberBtn"
								:style="{left:1132*widthBl+'px',top:682*heightBl+'px',width:82*widthBl+'px',height:40*heightBl+'px'}"
								@tap="clickNum(8)" v-if="picIndex==2&&funStep==3">
					
							</view>
							<view class="writeBox numberBtn"
								:style="{left:1232*widthBl+'px',top:682*heightBl+'px',width:82*widthBl+'px',height:40*heightBl+'px'}"
								@tap="clickNum(9)" v-if="picIndex==2&&funStep==3">
					
							</view>
					
							<view class="writeBox numberBtn"
								:style="{left:1132*widthBl+'px',top:752*heightBl+'px',width:82*widthBl+'px',height:40*heightBl+'px'}"
								@tap="clickNum(0)" v-if="picIndex==2&&funStep==3">
					
							</view>
							<view class="writeBox confirmInput"
								:style="{left:1422*widthBl+'px',top:612*heightBl+'px',width:82*widthBl+'px',height:40*heightBl+'px'}"
								@tap="confirmInput" v-if="confirmOpen&&funStep==3">
					
							</view>
							<!-- </view> -->
							<view class="showInfoBox" id="showInfoBox" v-if="picIndex==2"
								:style="{left:1121*widthBl+'px',top:95*heightBl+'px',width:510*widthBl+'px',height:265*heightBl+'px',position:'absolute'}">
								<view class="" style="color:#fff" :style="{height:30*heightBl+'px'}">
									<text v-if="funStep==1||funStep==2">查询菜单</text>
									<text v-if="(funStep==3||funStep==4)&&showQuestion==1">查询配置设备总数</text>
									<text v-if="(funStep==3||funStep==4)&&showQuestion==2">现场部件类型状态</text>
								</view>
								<view class="" style="display: flex;justify-content: space-between;">
									<view class=""
										:style="{width:350*widthBl+'px',textAlign:'center',height:200*heightBl+'px',lineHeight:200*heightBl+'px'}"
										v-if="funStep==1">
										正常监控状态
									</view>
									<view class=""
										:style="{width:350*widthBl+'px',textAlign:'left',height:200*heightBl+'px',}"
										v-if="funStep==2">
										<view class="">
											1、查询配置设备总数
					
										</view>
										<view class="">
											2、设备状态查询
					
										</view>
										<view class="">
											3、查询历史记录
										</view>
										<view class="">
											4、查询屏蔽部件
										</view>
									</view>
									<view class=""
										:style="{width:350*widthBl+'px',textAlign:'left',height:200*heightBl+'px',}"
										v-if="funStep==3&&showQuestion==1">
										<view class="">
											<text style="color: #51b5ee">{{num1}}</text>
											 <text style="color: #51b5ee">{{num2}}</text>
											 <text style="color: #51b5ee">{{num3}}</text>
											 回路 
											 <text style="color: #51b5ee">{{num4}}</text>  
											 <text style="color: #51b5ee">{{num5}}</text>
											 机
					
										</view>
										<view class="" :style="{lineHeight:200*heightBl+'px',textAlign:'center',color:'red'}">
											请输入数字编号点击确认
					
										</view>
					
									</view>
									<view class=""
										:style="{width:350*widthBl+'px',textAlign:'left',height:200*heightBl+'px',}"
										v-if="funStep==3&&showQuestion==2">
										<view class="">
											<text style="color:#51b5ee">{{step2num1}}</text>
											<text style="color:#51b5ee">{{step2num2}}</text>
											回路
											<text style="color:#51b5ee">{{step2num3}}</text>
											<text style="color:#51b5ee">{{step2num4}}</text>
											<text style="color:#51b5ee">{{step2num5}}</text>
											地址
											<text style="color:#51b5ee">{{step2num6}}</text>
											<text style="color:#51b5ee">{{step2num7}}</text>
											机
											
									
										</view>
										<view class="" :style="{lineHeight:200*widthBl+'px',textAlign:'center',color:'red'}">
											请输入数字编号点击确认
									
										</view>
									
									</view>
									<view class=""
										:style="{width:350*widthBl+'px',textAlign:'left',height:200*heightBl+'px',fontSize:'0.5vw'}"
										v-if="funStep==4&&showQuestion==1">
										<view class="">
											感烟2：2 4 感温：1：5 复合1：1
										</view>
										<view class="">
											手报：2:7~7 消钮：1：9 输入模块1：7	
					
										</view>
										<!-- <view class="">
											请输入数字编号点击确认
					
										</view> -->
										<view class="">
											输入输出模块2：13~14 层显：1：201
					
										</view>
										<view class="">
											监管：2：11~12 警报1：10
										</view>
										<view class="">
											紧急广播：1：15 合计：21
										</view>
										<view class="">
											操作已完成！
										</view>
									</view>
									<view class=""
										:style="{width:350*widthBl+'px',textAlign:'left',height:200*heightBl+'px',fontSize:'0.5vw'}"
										v-if="funStep==4&&showQuestion==2">
										<view class="">
											输入正确的数据
										</view>
										<view class="">
											类型：手动报警按钮
									
										</view>
										<view class="">
											状态：在线
									
										</view>
										<view class="">
											操作已完成！
										</view>
									</view>
									<view class="" :style="{width:150*widthBl+'px',height:200*heightBl+'px',padding:10*widthBl+'px',boxSizing:'border-box',paddingBottom:0}" style="display:flex;flex-direction:column;justify-content: space-between;">
										<view class="" :style="{height:80*heightBl+'px'}">
											<view class="">
												正常 运行
											</view>
											<view class="">
												手动： 允许
											</view>
											<view class="">
												自动： 允许
											</view>
										</view>
										<view class=""  id="timechangeBox" style="font-size: 1vh;text-align: center;color:#fff">
											<view class="dateInfo">
												{{formatTime(new Date(),'yyyy-MM-dd')}}
											</view>
											<view class="timeInfo">
												{{changedTime}}
											</view>
										</view>
									</view>
									
									
					
								</view>
								<view class="" style="font-size:1.5vh;color:#fff">
									F1查火警 F2查启动 F3查故障 F4查监管 F5查屏蔽 F6查反馈
								</view>
							</view>
						</view>
					</view>
					
				</view>
				
				
				
				
				<u-mask :show="showFlag" @click="onClickHide">
					<view class="wrapper" style="display: flex;align-items: center;justify-content: center;height:100%">
						<view class="block" style="width:400rpx;padding: 20rpx;box-sizing:border-box;background: #fff;font-size:2vh">
							<view class="overtitle">
								【试题解析】 正确答案
							</view>
							<view class="overtitle">
								{{analysList[showQuestion-1]}}
							</view>
							<view class="overtitle">
								正确答案：{{showQuestion==1?'21':'手报 在线状态'}}
							</view>
						</view>
					</view>
				</u-mask>
			</view>

		</template>
	</sysJk>

</template>

<script>
	import sysJk from '@/components/sysJk.vue'
	import {
		fzQuestion
	} from '@/globalApi/requestApi.js'
	import {formatTime} from '@/util/index.js'
	const app = getApp();
	const baseUrl = app.globalData.requestUrl;
	export default {
		components: {
			sysJk
		},
	
		data() {


			return {
				formatTime,
				examType:1,
				widthBl: 0,
				heightBl: 0,
				funStep: 1,
				writeBox: {width:0,height:0},
				writeBoxLeft: 0,
				writeBoxTop: 0,
				showFlag: false,
				showQuestion: 1,
				picIndex: 1,
				requestUrl:baseUrl,
				bUrl: baseUrl + "/static/image/jk/7-1.jpg",
				questionList: [
					'【1/2】请通过火灾报警控制器，查看001回路01机配置的设备总数（点击“功能键”进入查询菜单）',
					'【2/2】请通过火灾报警控制器，查看01回路001地址01机的工作状态（点击“功能键”进入查询菜单）'
				],
				num1: 'x',
				num2: 'x',
				num3: 'x',
				num4: 'x',
				num5: 'x',
				confirmOpen: false,
				items:[
					23,24,21,18
				],
				items2:[
					'消钮 离线状态',
					'手报 在线状态',
					'感烟 离线状态',
					'感温 在线状态'
				],
				step2num1:'x',
				step2num2:'x',
				step2num3:'x',
				step2num4:'x',
				step2num5:'x',
				step2num6:'x',
				step2num7:'x',
				analysList:[
					'点功能，选择1 ，输入题目给出的地址，按确定，该题是查该主机的某条回路连接了多少个设备',
					'点功能，选择2 ，输入题目给出的地址，按确定，该题是考核给出某个地址，能否查出是何设备，该设备状态好坏。'
				],
				result:null,
				isCorrect:true,
				changedTime:null,
				showTime:null,
				showDate:null,
				allScore:0
			}
		},
		onLoad(options) {
			this.examType=options.examType
			// var writeBox = uni.createSelectorQuery().in(this).select('#warp')
			// writeBox.boundingClientRect(data => {
			// 	this.writeBox = data
			// }).exec()
		},
		onShow() {
			this.createTime()
		},
		onReady() {
			this.drawWhiteBox()
		},
		methods: {
			createTime(){
				// this.showTime=this.formatTime(new Date(),'yy/MM/dd HH:mm:ss')
				let that = this
				// this.showTime = this.formatTime(new Date(),'HH:mm')
				this.showDate = this.formatTime(new Date(),'yy/MM/dd HH:mm:ss')
				setInterval(function(){
						that.showTime = that.formatTime(new Date(),'HH:mm')
						that.changedTime = that.formatTime(new Date(),'HH:mm:ss')
				},1000)
			},
			redo(){
				this.funStep=1
				this.result = null
				this.picIndex= 1
				this.bUrl= baseUrl + "/static/image/jk/7-1.jpg"
				this.num1 = 'x'
				this.num2 = 'x'
				this.num3 = 'x'
				this.num4 = 'x'
				this.num5 = 'x'
				this.num6 = 'x'
				this.step2num1='x'
				this.step2num2='x'
				this.step2num3='x'
				this.step2num4='x'
				this.step2num5='x'
				this.step2num6='x'
				this.step2num7='x'
			},
			confirmInput() {
				if(this.showQuestion==1){
					if (this.num1 == '0' && this.num2 == '0' && this.num3 == '1' && this.num4 == '0' && this.num5 == '1') {
						this.funStep = 4
					} else {
						this.num1 = 'x'
						this.num2 = 'x'
						this.num3 = 'x'
						this.num4 = 'x'
						this.num5 = 'x'
						this.confirmOpen = false
						uni.showToast({
							title: '请查看001回路01机配置',
							icon: 'none'
						})
					}
				}else{
					if (this.step2num1 == '0' && this.step2num2 == '1' && this.step2num3 == '0' && this.step2num4 == '0' && this.step2num5 == '1'&& this.step2num6 == '0'&& this.step2num7 == '1') {
						this.funStep = 4
					} else {
						this.step2num1='x',
						this.step2num2='x',
						this.step2num3='x',
						this.step2num4='x',
						this.step2num5='x',
						this.step2num6='x',
						this.step2num7='x',
						this.confirmOpen = false
						uni.showToast({
							title: '请查看01回路001地址01机工作状态',
							icon: 'none'
						})
					}
				}
				
			},
			clickNum(num) {
				if(this.showQuestion==1){
					if (this.num1 == 'x') {
						this.num1 = num
						return
					}
					if (this.num2 == 'x') {
						this.num2 = num
						return
					}
					if (this.num3 == 'x') {
						this.num3 = num
						return
					}
					if (this.num4 == 'x') {
						this.num4 = num
						return
					}
					if (this.num5 == 'x') {
						this.num5 = num
						this.confirmOpen = true
						return
					}
				}else{
					if (this.step2num1 == 'x') {
						this.step2num1 = num
						return
					}
					if (this.step2num2 == 'x') {
						this.step2num2 = num
						return
					}
					if (this.step2num3 == 'x') {
						this.step2num3 = num
						return
					}
					if (this.step2num4 == 'x') {
						this.step2num4 = num
						return
					}
					if (this.step2num5 == 'x') {
						this.step2num5 = num
						
						return
					}
					if (this.step2num6 == 'x') {
						this.step2num6 = num
						return
					}
					if (this.step2num7 == 'x') {
						this.step2num7 = num
						this.confirmOpen = true
						return
					}
				}
				



			},
			closeDialog() {
				this.picIndex = 1
				this.bUrl = baseUrl + "/static/image/jk/7-1.jpg"
			},
			goBack() {
				uni.navigateBack()
			},
			toStep(num) {
				if(num==1){
					this.bUrl = baseUrl + "/static/image/jk/7-2-1.jpg"
				}else if(num==2){
					this.bUrl = baseUrl + "/static/image/jk/7-2-2.jpg"
				}else {
					this.bUrl = baseUrl + "/static/image/jk/7-2.jpg"
				}
				this.funStep = num
			},
			handle() {
				let that = this
				this.$showModal2({
					title: '确认提交？',
					// content: '这是一个模态弹窗',
					
				}).then(res=>{
					
							let handleData = {
								fz_id: that.examId,
								title: that.showQuestion==1?'请通过火灾报警控制器，查看001回路01机配置的设备总数（点击“功能键”进入查询菜单）':'请通过火灾报警控制器，查看01回路001地址01机的工作状态（点击“功能键”进入查询菜单）',
								no: that.showQuestion==1?'6-1':'6-2',
								question_type: 1,
								user_answer: that.result,
								answer: '',
								is_correct: that.isCorrect,
								score: 2.5,
								start_time: '',
								end_time: '',
								question_answer: ''
							}
							if(!that.result){
								uni.showToast({
									title:'请选择答案',
									icon:'none'
								})
								return
							}
							if(that.showQuestion==1){
								if(that.result==21){
									handleData.is_correct = true
									handleData.score = 2.5
								}else{
									handleData.is_correct = false
									handleData.score = 0
								}
							}else{
								if(that.result=='手动报警按钮 在线状态'){
									handleData.is_correct = true
									handleData.score = 2.5
								}else{
									handleData.is_correct = false
									handleData.score = 0
								}
							}
							fzQuestion(handleData).then(res => {
								if (res.code == 200) {
									that.allScore+=handleData.score
									that.result = null
									if (that.showQuestion == 1) {
										that.showQuestion += 1
										that.bUrl = baseUrl + "/static/image/jk/7-1.jpg"
										that.picIndex = 1
										that.funStep = 1
									} else if (that.showQuestion == 2) {
										let pages = getCurrentPages()
										let prevPage = pages[pages.length -2] 
										prevPage.$vm.status2 = true
										prevPage.$vm.addScore(that.allScore)
										uni.navigateBack()
									}
								}
							})
						
				});
			},
			onChange(e) {
				
				this.result = e.detail.value
			},
			closeDialog() {
				this.picIndex = 1
				this.bUrl = baseUrl + "/static/image/jk/7-1.jpg"
			},
			showDialog() {
				this.picIndex = 2
				if(this.funStep==1){
					this.bUrl = baseUrl + "/static/image/jk/7-2-1.jpg"
				}else{
					this.bUrl = baseUrl + "/static/image/jk/7-2.jpg"
				}
				// this.showFlag = true
				// this.picIndex = 2
				// this.bUrl = baseUrl + "/static/image/jk/7-2-1.jpg"
			},
			onClickHide() {
				this.showFlag = false
			},
			drawWhiteBox() {
				let that = this
				var warp = uni.createSelectorQuery().in(this).select('#myCard')
				warp.boundingClientRect(data => {
					var widthBl = data.width / 1920
					var heightBl = data.height / 921
					this.widthBl = widthBl
					this.heightBl = heightBl
					this.writeBox.width = 100 * widthBl + 'px'
					this.writeBoxLeft = 650 * widthBl + 'px'
					this.writeBoxTop = 420 * heightBl + 'px'
					this.writeBox.height = 100 * heightBl + 'px'
				}).exec()

				// uni.getSystemInfo({
				// 	success: function(res) {
				// 		console.log(res)
				// 		

				// 	}
				// });
			},
			nextTask() {
				uni.navigateTo({
					url: '../jkH/jkH'
				})
			},
			lastTask() {
				uni.navigateBack()
			}
		}
	}
</script>


<style scoped lang="scss">
	.warp {
		height: 100%;
		box-sizing: border-box;
		// padding: 22rpx 33rpx 38rpx 36rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		background: #F6F6F6;
.answerBox {
			position: absolute;
			left: 35px;
			top: 0%;
			background: #fff;
			color: #000;
			// width: 20%;
			font-size: 2vh;
			.answerTit {
				background: orange;
				padding: 5px;
				box-sizing: border-box;
			}
		}

		.answerSelect {
			padding: 10px 0;
			box-sizing: border-box;
		}
		.myCard {
			width: 100%;
			height:100%;
			position: absolute;
			left:0;
			top:0;
			// border-radius: 20rpx;
			// overflow: hidden;
			// z-index: 1;

			.cardContent {
				// padding: 52rpx 58rpx 37rpx;
				box-sizing: border-box;
				width: 100%;
				height: 100%;
				position: relative;
				// z-index: 2;
				color: #fff;

				.moneyContent {
					margin-top: 54rpx;
					width: 100%;
					display: flex;
					align-items: center;

					.moneyDetail {
						width: 50%;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: flex-start;

						.detailTit {
							font-size: 24rpx;
							font-weight: 400;
						}

						.detailVal {
							font-size: 55rpx;
							font-weight: bold;
							margin-top: 35rpx;
						}
					}

				}

				.taskTit {
					width: 100%;
					text-align: left;
					background: #fff;
					color: #000
				}

				.handleBtn {
					position: fixed;
					left: 30px;
					bottom: 0px
				}

				.btnArea {
					// margin-top: 160rpx;
					//margin-left: 150rpx;
					display: flex;
					justify-content: center;
					position: fixed;
					right: 30px;
					bottom: 0px // text-align: center;
				}
			}
		}

		.infoBox {
			width: 100%;
			padding: 14rpx 30rpx;
			margin-top: 33rpx;
			border-radius: 20rpx;
			box-sizing: border-box;
			background: #fff;

			.singleInfo {
				width: 100%;
				box-sizing: border-box;
				padding: 20rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1rpx solid #ccc;

				.info {
					flex: 1;

					.desc {
						font-size: 26rpx;
						font-weight: 400;
						color: #222222;
					}

					.time {
						margin-top: 15rpx;
						font-size: 18rpx;
						font-weight: 400;
						color: #888888;
						display: flex;
						align-items: center;
					}
				}

				.val {
					width: 115rpx;
					height: 40rpx;
					border: 1rpx solid #DA2627;
					border-radius: 40rpx;
					text-align: center;
					font-size: 22rpx;
					font-weight: 400;
					color: #DA2627;
					line-height: 40rpx;
				}
			}
		}

		.writeBox {
			// border: 1px solid green;
			width: 100px;
			height: 100px;
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.showInfoBox {
			position: absolute;
			// background: #fff;
			color: #000;
			font-size: 1.5vh;
		}
	}
	.numberBtn{
		// background: rgba(216,153,109,0.5);
	}
</style>